/*
 * @Description:
 * @Author: fhw
 * @Date: 2023-02-26 15:36:37
 */
import { useRequest, useSearch } from '@/hooks'
import { clone, } from 'ramda'
import { defineComponent, reactive, toRaw, } from 'vue'
import { CoupleState, rows, columns } from './uilts'
import { defaultParams } from '@/utils'
import { UserOutlined } from '@ant-design/icons-vue';
import { configCurryFilter } from '@/dictionaries/filter'
import dayjs from 'dayjs'
import { useRouter } from "vue-router";
export default defineComponent({
    name: 'Couple',
    setup() {
        const router = useRouter()
        const { searchForm, expand, expandToggle } = useSearch<API.server.operationRecord.getOperationRecordPage.Params>({
            ...defaultParams
        })
        function search(is = true) {
            const params = clone(toRaw(searchForm.value))
            run({
                ...params,
                ...defaultParams,
                ...getPagination(is),
            } as any)
        }
        function clear() {
            searchForm.value = { ...defaultParams }
            search()
        }
        const { run, data, getPagination, renderPagination, loading } = useRequest(
            API.server.couple.getCoupleList.request,
            {
                manual: true,
                pagination: true,
                defaultParams: [{ ...defaultParams }]
            }
        )
        function toDetails(id: number) {
            router.push(`/user/couple/details/${id}`)
        }
        return () => (
            <div>
                <a-row gutter={[16, 16]}>
                    {
                        data.value?.data?.data.map((item: CoupleState) => {
                            return <a-col span={6} >
                                <a-card hoverable style="width: 100%;border-radius: 8px;height:100%"
                                    bodyStyle="padding:20px 14px"
                                    v-slots={{
                                        cover: () => <img
                                            style="border-radius: 8px 8px 0 0;    object-fit: cover;"
                                            height={200}
                                            alt="example"
                                            src={item.bgUrl}
                                        />,
                                    }}
                                    onClick={() => toDetails(item.id as number)}
                                >
                                    <a-card-meta title={`${item.male?.username} & ${item.female?.username}`}
                                        v-slots={{
                                            avatar: () =>
                                                <a-avatar-group>
                                                    <a-avatar src={item.male?.avatar} v-slots={{
                                                        icon: () => <UserOutlined />
                                                    }} />
                                                    <a-avatar src={item.female?.avatar} v-slots={{
                                                        icon: () => <UserOutlined />
                                                    }} />
                                                </a-avatar-group>
                                        }}
                                    >
                                    </a-card-meta>
                                </a-card>
                            </a-col>
                        })
                    }

                </a-row>
                {renderPagination()}
            </div>
        )
    },
})
